<template>
  <view class="SearchTeamList">
    <EmptyBox v-if="!teamList.length" />
    <view class="list" v-if="teamList.length">
      <TeamItem
        v-for="(item, index) in leftList"
        :key="index"
        :teamDetail="item"
      />
    </view>
    <view class="list" v-if="teamList.length">
      <TeamItem
        v-for="(item, index) in rightList"
        :key="index"
        :teamDetail="item"
      />
    </view>
  </view>
</template>

<script>
import TeamItem from "../../../components/team/TeamItem.vue";
import EmptyBox from "../../../components/public/EmptyBox.vue";
import { mapState } from "vuex";
export default {
  name: "SearchTeamList",
  components: {
    TeamItem,
    EmptyBox,
  },

  data() {
    return {
      teamList: [],
    };
  },

  computed: {
    ...mapState("m_search", ["searchTeamList"]),
    rightList() {
      return this.teamList.filter((item, index) => (index + 1) % 2 === 0);
    },
    leftList() {
      return this.teamList.filter((item, index) => (index + 1) % 2 !== 0);
    },
  },
  watch: {
    searchTeamList(newValue) {
      for (let i = 0; i < newValue.length; i++) {
        // 延迟动画效果
        setTimeout(() => {
          this.teamList.push(newValue[i]);
        }, 100 * i);
      }
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.SearchTeamList {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 15rpx;
  .list {
    width: 47vw;
  }
}
</style>
